<template>
  <div flex gap30px>
    <div class="flex-1">
      <!-- 视角 -->
      <div class="p-y-20px b-b-1px b-b-solid b-b-#f1f2f3" v-if="isUserHimself">
        <el-button class="w-86px h-34px" color="#00aeec" @click="viewType = 1"
          >粉丝视角</el-button
        >
        <el-button class="w-100px h-34px" @click="viewType = 2"
          >新访客视角</el-button
        >

        <div class="flex items-center justify-center gap20px">
          <img
            class="w-120px h-120px"
            src="/src/assets/img/userHome/video-null.png"
            alt=""
          />
          <div v-if="viewType == 1">
            <p class="c-#9499a0 text-14px leading-20px">
              置顶视频是粉丝们看到的第一个视频，
              <br />
              请选择你最喜欢的作品，让粉丝们一饱眼福吧！
            </p>
            <el-button color="#00aeec" class="w-100px h-34px c-#fff m-t-10px">
              置顶视频
            </el-button>
          </div>
          <div v-if="viewType == 2">
            <p class="c-#9499a0 text-14px leading-20px">
              代表作是新访客看到的第一个视频，
              <br />
              选择你的得意之作，吸引新访客立即关注你吧！
            </p>
            <el-button color="#00aeec" class="w-100px h-34px c-#fff m-t-10px">
              代表作视频
            </el-button>
          </div>
        </div>
      </div>

      <!-- 收藏夹 -->
      <div class="p-y-20px b-b-1px b-b-solid b-b-#f1f2f3">
        <div class="flex items-center justify-between w-full p-b-10px">
          <div class="flex items-center">
            <span
              class="text-24px font-700 cursor-pointer c-#18191c hover:c-#00aeec"
            >
              收藏夹
            </span>
            <span class="text-16px m-x-6px c-#61666d">·</span>
            <span class="text-16px c-#61666d">1</span>
            <span class="text-14px c-#9499a0 m-l10px">仅自己可见</span>
          </div>

          <div
            class="w100px h34px c-#18191c p-x-12px b-1px b-solid b-#e3e5e7 b-rd-8px leading-34px text-center cursor-pointer hover:bg-#e3e5e7"
          >
            <span class="text-14px">查看更多</span>
            <span class="iconfont icon-jiantou2 v-bottom"></span>
          </div>
        </div>

        <div class="p-t-20px grid grid-cols-5 gap-row-20px gap-col-16px">
          <el-skeleton v-if="collectLoading" v-for=" in 5" animated>
            <template #template>
              <div>
                <el-skeleton-item
                  variant="image"
                  style="
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    height: auto;
                    padding-bottom: 10px;
                    border-radius: 4px;
                  "
                />
                <el-skeleton :rows="2" />
              </div>
            </template>
          </el-skeleton>
          <div
            v-for="(collect, index) in collectList"
            :key="index"
            class="cursor-pointer group"
          >
            <div
              class="w-full b-rd-8px aspect-video bg-#e3e5e7 shadow-[inset_0_-60px_9px_-34px_rgba(0,0,0,0.3)] bg-center bg-cover relative"
              :style="{
                backgroundImage: `url(${
                  collect.coverFileIdUrl || collectCoverDefault
                })`,
              }"
            >
              <div class="p-x-10px box-border absolute top--8px w-full h-8px">
                <div
                  class="w-full h-8px bg-[rgba(227,229,231,0.5)] rounded-t-8px"
                ></div>
              </div>
              <div class="p-x-20px box-border absolute top--16px w-full h-8px">
                <div
                  class="w-full h-8px bg-[rgba(227,229,231,0.3)] rounded-t-8px"
                ></div>
              </div>
              <div
                class="absolute bottom-0 flex justify-between w-full p-x-10px box-border leading-30px c-#fff"
              >
                <span class="iconfont icon-siyou"></span>
                <span class="text-14px">{{ collect.contentCount }} 个视频</span>
              </div>
            </div>
            <p class="m-t-10px hover:c-#00aeec line-clamp-1">
              {{ collect.collectName }}
            </p>
            <span class="text-12px c-#9499a0">{{
              collect.isPublic == 0 ? "私有" : "公开"
            }}</span>
          </div>
        </div>
      </div>

      <!-- 最近投币的视频 -->
      <div class="p-y-20px b-b-1px b-b-solid b-b-#f1f2f3">
        <div class="flex items-center p-b-20px">
          <span
            class="text-24px font-700 cursor-pointer c-#18191c hover:c-#00aeec"
          >
            最近投币的视频
          </span>
          <span class="text-14px c-#9499a0 m-l10px">仅自己可见</span>
        </div>

        <div class="grid grid-cols-5 gap-row-20px gap-col-16px">
          <el-skeleton v-if="videoLoading" v-for=" in 5" animated>
            <template #template>
              <div>
                <el-skeleton-item
                  variant="image"
                  style="
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    height: auto;
                    padding-bottom: 10px;
                    border-radius: 4px;
                  "
                />
                <el-skeleton :rows="2" />
              </div>
            </template>
          </el-skeleton>

          <div
            v-for="(video, index) in coinVideoList"
            :key="index"
            class="cursor-pointer group"
            @click="router.push({ path: `/video/${video.id}` })"
          >
            <div class="flex justify-center aspect-video relative">
              <!-- 视频（默认隐藏，悬停时播放） -->
              <video
                class="w-full b-rd-4px object-contain bg-#000 ___"
                ref="coinVideoPlayers"
                preload="none"
                :poster="video.coverUrl"
                loop
                muted
                @mouseenter="playVideo(index, coinVideoPlayers)"
                @mouseleave="pauseVideo(index, coinVideoPlayers)"
              >
                <source :src="video.fileUrl" type="video/mp4" />
                <source :src="video.fileUrl" type="video/webm" />
              </video>
              <div
                class="absolute bottom-0 c-white flex justify-between w-full p-x-10px p-b-5px box-border text-13px group-hover:hidden"
              >
                <div>
                  <span class="iconfont icon-shipin v-bottom"></span>
                  {{ video.playCount }}
                  <span class="iconfont icon-danmushu m-l-10px v-bottom"></span>
                  {{ video.danmakuCount }}
                </div>
                <span>{{
                  DateUtil.convertSecondsToHMS(
                    Number(video.duration).toFixed(0)
                  )
                }}</span>
              </div>
            </div>
            <p class="line-clamp-2 c-#18191c text-15px m-y-10px h-40px">
              {{ video.title }}
            </p>
            <div class="c-#9499a0 text-13px">
              <span class="iconfont icon-upzhu v-mid"></span>
              {{ video.createByName }}
              {{ DateUtil.formatDateToShort(video.createTime) }}
            </div>
          </div>
        </div>
      </div>

      <!-- 最近点赞的视频 -->
      <div class="p-y-20px b-b-1px b-b-solid b-b-#f1f2f3">
        <div class="flex items-center p-b-20px">
          <span
            class="text-24px font-700 cursor-pointer c-#18191c hover:c-#00aeec"
          >
            最近点赞的视频
          </span>
          <span class="text-14px c-#9499a0 m-l10px">仅自己可见</span>
        </div>

        <div class="grid grid-cols-5 gap-row-20px gap-col-16px">
          <el-skeleton v-if="videoLoading" v-for=" in 5" animated>
            <template #template>
              <div>
                <el-skeleton-item
                  variant="image"
                  style="
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    height: auto;
                    padding-bottom: 10px;
                    border-radius: 4px;
                  "
                />
                <el-skeleton :rows="2" />
              </div>
            </template>
          </el-skeleton>
          <div
            v-for="(video, index) in likeVideoList"
            :key="index"
            class="cursor-pointer group"
            @click="router.push({ path: `/video/${video.id}` })"
          >
            <div class="flex justify-center aspect-video relative">
              <!-- 视频（默认隐藏，悬停时播放） -->
              <video
                class="w-full b-rd-4px object-contain bg-#000 ___"
                ref="likeVideoPlayers"
                preload="none"
                :poster="video.coverUrl"
                loop
                muted
                @mouseenter="playVideo(index, likeVideoPlayers)"
                @mouseleave="pauseVideo(index, likeVideoPlayers)"
              >
                <source :src="video.fileUrl" type="video/mp4" />
                <source :src="video.fileUrl" type="video/webm" />
              </video>
              <div
                class="absolute bottom-0 c-white flex justify-between w-full p-x-10px p-b-5px box-border text-13px group-hover:hidden"
              >
                <div>
                  <span class="iconfont icon-shipin v-bottom"></span>
                  {{ video.playCount }}
                  <span class="iconfont icon-danmushu m-l-10px v-bottom"></span>
                  {{ video.danmakuCount }}
                </div>
                <span>{{
                  DateUtil.convertSecondsToHMS(
                    Number(video.duration).toFixed(0)
                  )
                }}</span>
              </div>
            </div>
            <p class="line-clamp-2 c-#18191c text-15px m-y-10px h-40px">
              {{ video.title }}
            </p>
            <div class="c-#9499a0 text-13px">
              <span class="iconfont icon-upzhu v-mid"></span>
              {{ video.createByName }}
              {{ DateUtil.formatDateToShort(video.createTime) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 侧边栏 -->
    <Sidebar />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getRecentLikeVideos } from "@/api/video";
import type { VideoVO } from "@/api/video/types";
import { DateUtil } from "@/utils/dateUtil";
import router from "@/router";
import { listUserCollect } from "@/api/userCollect";
import type { UserCollectQuery, UserCollectVO } from "@/api/userCollect/types";
import { useRoute } from "vue-router";
import { useUserStore } from "@/store/userStore";
import collectCoverDefault from "@/assets/img/userHome/collect_cover_default.png";
import Sidebar from "../components/Sidebar.vue";

const route = useRoute();

const userStore = useUserStore();

// 路径参数
const userId = route.params.userId as string;

// 视角类型 1-粉丝视角 2-新访客视角
const viewType = ref(1);

// 是否本人
const isUserHimself = userStore.userInfo.id.toString() == userId;

// 最近点赞的视频
const likeVideoList = ref<VideoVO[]>([]);

// 点赞视频播放器引用
const likeVideoPlayers = ref([]);

// 最近投币的视频
const coinVideoList = ref<VideoVO[]>([]);
// 投币视频播放器引用
const coinVideoPlayers = ref([]);

// 是否正在加载视频
const videoLoading = ref(true);

// 是否正在加载收藏夹
const collectLoading = ref(true);

// 收藏夹列表
const collectList = ref<UserCollectVO[]>([]);

// 鼠标移入视频
const playVideo = async (index, videoPlayers) => {
  const video = videoPlayers[index];
  if (video) {
    try {
      await video.play();
    } catch (err) {
      console.log("播放被阻止:", err);
    }
  }
};

// 鼠标移出视频
const pauseVideo = async (index, videoPlayers) => {
  const video = videoPlayers[index];
  if (video) {
    await video.pause();
    // video.currentTime = 0; // 重置播放进度
  }
};

onMounted(async () => {
  getRecentLikeVideos(userId).then((res) => {
    likeVideoList.value = res.data.like;
    coinVideoList.value = res.data.coin;
    videoLoading.value = false;
  });

  const listUserCollectParam = <UserCollectQuery>{
    pageNum: 1,
    pageSize: 5,
    createBy: userId,
  };

  if (!isUserHimself) {
    listUserCollectParam.isPublic = 1; // 仅查询公开的收藏夹
  }

  listUserCollect(listUserCollectParam).then((res) => {
    collectList.value = res.rows;
    collectLoading.value = false;
  });
});
</script>

<style scoped></style>
